<template>
  <div class="login">
<!--      <transition name="el-fade-in-linear">-->
<!--        <el-card class="box-card" shadow="hover" style="text-align: center"    @keyup.enter.native="login" >-->
<!--          <div slot="header" class="clearfix" style="text-align: center">-->
<!--            <h2 style="font-size: 1rem;margin-top: 80px">小学校园疫情防控管理系统</h2>-->
<!--          </div>-->
<!--          <el-input prefix-icon="el-icon-user-solid" v-model="input_user" placeholder="请输入用户名" class="inp"></el-input>-->
<!--          <div style="height: 1.3rem"></div>-->
<!--          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="input_pwd" show-password class="inp" ></el-input>-->
<!--          <el-radio-group v-model="radio3" size="small" style="display: flex;justify-content: space-around;margin-top: 1.3rem;">-->
<!--            <el-radio label="1" border>管理员</el-radio>-->
<!--            <el-radio label="2" border>学生</el-radio>-->
<!--            <el-radio label="3" border>教师</el-radio>-->
<!--          </el-radio-group>-->
<!--          <el-button type="primary" class="button" size="small"@click="login">登录</el-button>-->
<!--        </el-card>-->
<!--      </transition>-->
      <div class="login-container">
        <div class="title-img"></div>
        <div class="form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="" prop="user">
              <el-input v-model.trim="ruleForm.user" autocomplete="off" placeholder="请输入用户名" @keyup.enter.native="submitForm('ruleForm')" >
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="password" style="margin-top: 30px">
              <el-input  type="password" v-model.trim="ruleForm.password" autocomplete="off" placeholder="请输入密码" @keyup.enter.native="submitForm('ruleForm')">
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="radio" style="margin-top: 30px">
              <el-radio-group v-model="ruleForm.radio" size="small" style="display: flex;justify-content: space-around;margin-top: 1.3rem;">
                <el-radio label="1" border>管理员</el-radio>
                <el-radio label="2" border>学生</el-radio>
                <el-radio label="3" border>教师</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-top: 50px">
              <el-button class="submit" type="primary" @click="submitForm('ruleForm')"  style="width: 350px; height: 45px;font-size: 14px">登 录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    name:'Login',
    data() {
    return {
      ruleForm:{
        user:'',
        password:'',
        radio:"1"
      },
      rules: {
        user: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
      /**
       * 登录
       * 用户名：username:this.input_user,
       * 密码：password:this.input_pwd,
       */
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$Axios({
              url:'/users/login',
              method:'post',
              data:{
                username:this.ruleForm.user,
                password:this.ruleForm.password,
                type:this.ruleForm.radio
              },
              success:(result)=>{
                if (result=="用户名或者账号输入错误"){
                  this.$message.error("用户名或者账号输入错误")
                }else{
                  window.localStorage.setItem("token",result.jwt_token)
                  //方便后来群聊使用
                  const socketData={
                    "id":result.loginData[0].id,
                    "name":result.loginData[0].username,
                    "img":result.loginData[0].head,
                  }
                  window.localStorage.setItem("socketData",JSON.stringify(socketData))
                  //  window.localStorage.setItem("id",id);
                  if (this.ruleForm.radio==1)  window.location.href=' http://localhost:80/#/admin/home'
                  if (this.ruleForm.radio==2)  window.location.href=' http://localhost:80/#/student/myNotice'
                  if (this.ruleForm.radio==3)  window.location.href=' http://localhost:80/#/teacher/home'
                }
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },


      open3(v) {
          this.$message({
              message:v,
              type: 'warning'
          });
      },
  }
}
</script>
<style lang="scss" scoped>
    .login {
      display: flex;
      width: 100%;
      height: 100vh;
      min-height: 500px;
      overflow: auto;
      background-image: url("../../assets/images/background.png");
      background-repeat: no-repeat;
      //background-position: center center;
      background-attachment: fixed;
      background-size: cover;
      align-items: center;
      flex-direction: column;
      justify-content: center;


      .login-container{
        width: 480px;
        height: 510px;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        box-shadow: 0 0 15px #888888;
        .title-img{
          width: 350px;
          height: 55px;
          margin-top: 80px;
          background-image: url("../../assets/images/title.jpg");
          background-size: cover;
        }
        .form{
          margin-top: 50px;
          .el-form-item__content{
            width: 350px;
            .el-input--small .el-input__inner{
              height: 45px;
            }
          }
        }
        .el-form-item.is-error {
          margin-bottom: 30px
        }
        .el-form-item__error {
          margin-top: 3px;
        }
        .el-button--primary:hover, .el-button--primary:focus{
          background: #0984e3;
          border-color: #0984e3;
        }
      }
    }
</style>
